<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>index demo</title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="index.css">
<body @resize="resize()">
<div id="container" class="cm-content">
  <div id="header">
    <div class="cm-content">
      <div class="search">
        <div class="input">
          <label for="search"><i class="fa fa-search blue"></i></label>
          <input id="search" type="" name="search" placeholder="搜索一下">
        </div>
      </div>
    </div>
  </div>
  <div id="classify">
    <div class="classify-catalog">
      <div class="cm-content"  @mousedown="md($event)" @mousemove="mm($event)" @mouseup="mu($event)">
        <a v-for="(item,index) in type.data":class="{active: index == type.count}" ondragstart="return false"
        class="classify-catalog-item" @click="scrollLeftFunc($event,index)" v-text="item"></a>
      </div>
    </div>
    <div class="classify-data">
      <div class="classify-data-item" :id="index" v-for="(list,index) in type.list">
        <div class="classify-data-item-img">
          <img :src="list.background"/>
        </div>
        <h3 v-text="list.name"></h3>
        <div class="classify-data-item-list">
          <div class="classify-data-item-list-item left" v-for="item in list.data">
            <div class="classify-data-item-list-item-img">
              <img :src="item.img" />
            </div>
            <div class="classify-data-item-list-item-text">
              <span v-text="item.name"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="cm-content">
        <ul class="list">
          <li v-for="(item,index) in footer.list" :style="footer.styleWidth">
          <a :class="{active : footer.count == index}" :href="item.href">
            <i :class="item.icon"></i>
            <span v-text="item.name"></span>
            <span v-if="index == 2 && footer.cartCount > 0" class="count">19</span>
          </a>
          </li>
        </ul>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#container',
    data: {
      footer: {
        list: [
          {name: '首页', icon: 'fa fa-2x fa-home', href: '#'},
          {name: '分类', icon: 'fa fa-2x fa-bars', href: '#'},
          {name: '购物车', icon: 'fa fa-2x fa-cart-plus', href: '#'},
          {name: '我的', icon: 'fa fa-2x fa-user-circle-o', href: '#'}
        ],
        count: 0,
        styleWidth: {
          width: '0%'
        },
        cartCount: 1
      },
      type: {
        data: [
          "手机", "笔记本", "台式电脑", "手机配件", "电视", "平板"
        ],
        count: 0,
        list: [
          {
            background: 'img/title.png',
            name: '手机',
            data: [
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'}
            ]
          },
          {
            background: 'img/title.png',
            name: '笔记本',
            data: [
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'}
            ]
          },
          {
            background: 'img/title.png',
            name: '台式电脑',
            data: [
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'}
            ]
          },
          {
            background: 'img/title.png',
            name: '手机配件',
            data: [
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'}
            ]
          },
          {
            background: 'img/title.png',
            name: '电视',
            data: [
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'}
            ]
          },
          {
            background: 'img/title.png',
            name: '平板',
            data: [
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'},
              {name: '小米Note2', img: 'img/xiaomi-note2.png'}
            ]
          },
        ]
      },
      scrollLeft: {
        index: 0,
        sum: 100,
        step: 0,
        status: true,
        clickType: true
      }
    },
    created: function() {
      var length = this.footer.list.length;
      this.footer.styleWidth.width = 100 / length + '%';
      window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.addEventListener('scroll', this.scrollTop, false);

    },
    mounted: function() {
    },
    methods: {
      resize: function() {
      },
      /** 平滑过度 */
      scrollLeftFunc: function(e,index) {
        window.location.hash = "#" + index;
        if(this.scrollLeft.clickType) {
          var ele = document.querySelector('.classify-catalog .cm-content');
          this.type.count = index;
          this.scrollLeft.index = ele.scrollLeft;
          this.scrollLeft.sum = index*(e.target || e).offsetWidth;
          this.scrollLeft.step = this.scrollLeft.sum - this.scrollLeft.index;
          if(ele.scrollLeft + ele.offsetWidth <= ele.scrollWidth+2 && this.scrollLeft.step != 0) {
            requestAnimationFrame(this.scrollLeftRun);
          }
        }
      },
      /** 循环函数 */
      scrollLeftRun: function() {
        var ele = document.querySelector('.classify-catalog .cm-content');
        this.scrollLeft.index += this.scrollLeft.step / 18 ;
        ele.scrollLeft = this.scrollLeft.index;
        if(this.scrollLeft.index < this.scrollLeft.sum && this.scrollLeft.step > 0) {
          requestAnimationFrame(this.scrollLeftRun);
        } else if ( this.scrollLeft.index > this.scrollLeft.sum && this.scrollLeft.step < 0) {
          requestAnimationFrame(this.scrollLeftRun);
        }
      },
      /** 垂直滚动 */
      scrollTop: function() {
        var items = document.querySelectorAll('.classify-data-item');
        for(var i = 0; i < this.type.data.length; i++) {
          if(i < this.type.data.length - 1) {
            if(document.body.scrollTop < items[i+1].offsetTop - items[0].offsetTop) {
              this.scrollLeftFunc(document.querySelectorAll('.classify-catalog a')[i],i);
              break;
            }
          } else {
            if(document.body.scrollTop > items[this.type.data.length - 1].offsetTop) {
              this.scrollLeftFunc(document.querySelectorAll('.classify-catalog a')[i],i);
              break;
            }
          }
        }
      },
      /** 鼠标按下 */
      md: function(e) {
        this.scrollLeft.clickType = true;
        this.scrollLeft.status = false;
        this.scrollLeft.index = e.clientX;
        this.scrollLeft.sum = document.querySelector('.classify-catalog .cm-content').scrollLeft;
      },
      /** 鼠标移动 */
      mm: function(e) {
        if(!this.scrollLeft.status) {
          document.querySelector('.classify-catalog .cm-content').scrollLeft = this.scrollLeft.sum + this.scrollLeft.index - e.clientX;
          this.scrollLeft.clickType = false;
        }
      },
      /** 鼠标松开 */
      mu: function(e) {
        this.scrollLeft.status = true;
      }
    },
    watch: {
    }
  });
</script>
</html>